<template>
  <view class="box">
    <view class="title">
      <view class="icon" :class="type == 'advantage'? 'icon-advantage' : 'icon-disadvantage'"></view>
      <view class="text">
        {{title}}
      </view>
    </view>
    <view class="section" v-for="(item,index) in list" :key="index">
      <view class="section-title">
        <text class="icon" :class="type == 'advantage'? 'icon-check' : 'icon-disadvantage-list'"></text>
        {{item.title}}：
      </view>
      <view class="section-content">
        {{item.describe}}
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    title: String,
    type: {
      type: String,
      default: "advantage",
    },
    list: {
      type: Array,
      default: () => ([]),
    },
  },
  data() {
    return {};
  },
};
</script>

<style lang="scss" scoped>
.box {
  padding: 24rpx 20rpx;
  font-family: Arial, sans-serif;
  background-color: #ffffff;
  border-radius: 30rpx;
  font-size: 24rpx;
  box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0,0,0,0.05);
}

.title {
  margin-bottom: 12rpx;
  font-weight: 500;
  font-size: 36rpx;
  color: #222222;

  .text {
    display: inline-block;
    vertical-align: middle;
  }
}

.icon-advantage {
  margin-right: 12rpx;
  width: 60rpx;
  height: 60rpx;
  background-image: url($img-base + "resume/advantage.png");
}

.icon-disadvantage {
  margin-right: 12rpx;
  width: 60rpx;
  height: 60rpx;
  background-image: url($img-base + "resume/disadvantage.png");
}

.section {
  margin-top: 18rpx;
  padding: 28rpx 28rpx 38rpx 28rpx;
  background: #FCFCFC;
  border-radius: 20rpx 20rpx 20rpx 20rpx;
}

.section-title {
  display: flex;
  align-items: center;
  font-weight: bold;
  margin-bottom: 10px;
  position: relative;
}

.icon-check {
  margin-right: 12rpx;
  width: 28rpx;
  height: 28rpx;
  background-image: url($img-base + "resume/success.png");
}

.icon-disadvantage-list {
  margin-right: 12rpx;
  width: 28rpx;
  height: 28rpx;
  background-image: url($img-base + "resume/disadvantage-list.png");
}

.section-content {
  color: #555555;
  font-weight: 400;
  font-size: 24rpx;
  line-height: 38rpx;
}
</style>
